<template>
	<view class="box">
		<view class="content">
			<view class="content-bg">
				<view class="content-bg-top"></view>
			</view>
			<view class="content-main">
				<view class="main-top">
					<u-navbar title="我的饮水" :autoBack="true" bgColor="transparent" :fixed="false">
					</u-navbar>
				</view>
				<view class="main-content">
					<uni-segmented-control :current="Number(current)" :values="items" @clickItem="onClickItem"
						styleType="text" activeColor="#2590FA"></uni-segmented-control>
					<scroll-view :scroll-y="true" :refresher-enabled="true" :refresher-threshold="0"
						@refresherrefresh="refresherrefresh" style="height: 100%;overflow: auto; margin-top: 48rpx;"
						:refresher-triggered="refresherTriggered" @scrolltolower="scrolltolower" :lower-threshold="20">
						<view class='content'>
							<u-transition :show="true" mode="slide-left">
								<DrinkingWaterList :objData="obj"></DrinkingWaterList>
							</u-transition>
							<view v-if="Object.keys(obj).length === 0" class="nodata">
								<view class="contents">
									<image src="../../../../static/image/zanwusheibei.png"></image>
									<view class="text"> 暂无数据</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<safe-bottom-x></safe-bottom-x>
	</view>
</template>

<script>
import DrinkingWaterList from './drinkingWaterList.vue';
export default {
	data() {
		return {
			date: "",
			items: ['今日', '近7天', '近30天'],
			current: "0",
			refresherTriggered: false,
			listData: {
				page: 1,
				limit: 10,
				type: 1,
			},
			obj: {}
		};
	},
	computed: {
	},
	components: {
		DrinkingWaterList
	},
	onLoad() {

	},
	onShow() {
		this.getList()
	},
	methods: {
		onClickItem(e) {
			if (this.current != e.currentIndex) {
				this.current = e.currentIndex;
			}
			this.listData.type = e.currentIndex + 1;
			this.listData.page = 1;
			this.status = "loading"
			this.getList()
		},
		onClick(e) {
			this.current = e.currentIndex;
		},
		onChange(e) {
			this.current = e.detail.current;
		},
		onClick(e) {
			this.getList()

		},
		refresherrefresh() {
			this.refresherTriggered = true;
			this.status = "loading"
			this.listData.page = 1;
			this.getList()
		},
		scrolltolower() {
			// if (this.status == "nomore") return;
			// if (!this.loading) {
			// 	this.listData.page++;
			// 	this.status = "loading"
			// 	this.getList(false);
			// }
		},
		getList(state = true) {
			this.$request.get("/product/drinkData/list", this.listData).then(res => {
				setTimeout(() => {
					this.loading = false;
				}, 200);
				this.refresherTriggered = false;
				if (res.code == 0) {
					if (this.listData.limit > res.data.length) {
						this.status = "nomore"
					} else {
						this.status = "loadmore"
					}
					if (state) {
						this.obj = res.data;
					} else {
						this.obj.push(...res.data)
					}

				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}

			})
		},
	}
}
</script>

<style lang="scss">
.box {
	display: flex;
	flex-direction: column;

	>.content {
		flex: 1;
		overflow: auto;
		position: relative;
		display: flex;
		flex-direction: column;

		>view {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		.content-bg {

			.content-bg-top {
				height: 208rpx;
				background: linear-gradient(360deg, rgba(212, 231, 250, 0) 0%, #D4E7FA 100%);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}
		}

		.content-main {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: auto;

			.main-top {}

			.main-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding-top: 32rpx;
				box-sizing: border-box;
				overflow: auto;

				.content {
					flex: 1;
				}

				.themoon-contenList-List {
					flex: 1;
					overflow: auto;
				}
			}

			.contents {
				.text {}
			}

			.nodata {
				display: grid;
				place-content: center;
				height: 100%;

				.contents {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					image {
						width: 150px;
						height: 114px;
					}

					.text {
						font-size: 20rpx;
					}
				}

			}

		}
	}
}
</style>